<template>
  <div class="app-container">
    <div class="infoTitle">
      数据信息
    </div>
    <div style="margin-top: 18px">
      <el-radio-group v-model="radio" @change="radioChange">
        <el-radio-button label="2020"></el-radio-button>
        <el-radio-button label="2021"></el-radio-button>
      </el-radio-group>

      <el-table :data="tabList1"  style="margin-top: 5px">
        <el-table-column label="序号" type="index" width="55" align="center" />
        <el-table-column label="名称" align="center" prop="pcafs_name"/>
        <el-table-column label="时间" align="center" prop="sj"/>
        <el-table-column label="净资产收益率" align="center" >
          <template slot-scope="scope">
            <span >{{scope.row.jzcsyl}}</span>
          </template>
        </el-table-column>
        <el-table-column label="资产负债率" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.zcfzl}}</span>
          </template>
        </el-table-column>
        <el-table-column label="总资产收益率" align="center">
          <template slot-scope="scope">
            <span >{{scope.row.zzcsyl}}</span>
          </template>
        </el-table-column>
        <el-table-column label="销售净利率" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.xsjlv}}</span>
          </template>
        </el-table-column>
        <el-table-column label="总资产周转率" align="center">
          <template slot-scope="scope">
            <span >{{scope.row.zzczzl}}</span>
          </template>
        </el-table-column>
        <el-table-column label="存货周转率" align="center">
          <template slot-scope="scope">
            <span >{{scope.row.chzzl}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="infoTitle" style="margin-top: 20px">
      二维矩阵
    </div>
    <div style="margin-top: 18px">
      <el-table :data="tabList1"  style="margin-top: 5px">
        <el-table-column label="净资产收益率" align="center" >
          <template slot-scope="scope">
            <span >{{scope.row.jzcsyl}}</span>
          </template>
        </el-table-column>
        <el-table-column label="资产负债率" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.zcfzl}}</span>
          </template>
        </el-table-column>
        <el-table-column label="总资产收益率" align="center">
          <template slot-scope="scope">
            <span >{{scope.row.zzcsyl}}</span>
          </template>
        </el-table-column>
        <el-table-column label="销售净利率" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.xsjlv}}</span>
          </template>
        </el-table-column>
        <el-table-column label="总资产周转率" align="center">
          <template slot-scope="scope">
            <span >{{scope.row.zzczzl}}</span>
          </template>
        </el-table-column>
        <el-table-column label="存货周转率" align="center">
          <template slot-scope="scope">
            <span >{{scope.row.chzzl}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="infoTitle" style="margin-top: 20px">
      去中心化矩阵
    </div>
    <div style="margin-top: 18px">
      <table  cellpadding="0" cellspacing="0" class="clearfix bigTable"  style="border-collapse: collapse;margin: 10px auto;border: solid black;border-width:1px 0 1px 0px">
        <tr v-for='(item, index) in tabList2' style="text-align: center;height: 35px ">
          <template v-for='items in item'>
              <td style="width: 3%">{{items}}</td>
          </template>
        </tr>
      </table>
    </div>

    <div class="infoTitle" style="margin-top: 20px">
      协方差矩阵
    </div>
    <div style="margin-top: 18px">
      <table  cellpadding="0" cellspacing="0" class="clearfix bigTable"  style="border-collapse: collapse;margin: 10px auto;border: solid black;border-width:1px 0 1px 0px">
        <tr v-for='(item, index) in tabList3' style="text-align: center;height: 35px ">
          <template v-for='items in item'>
            <td style="width: 3%">{{items}}</td>
          </template>
        </tr>
      </table>
    </div>

    <div class="infoTitle" style="margin-top: 20px">
      特征值矩阵
    </div>
    <div style="margin-top: 18px">
      <table  cellpadding="0" cellspacing="0" class="clearfix bigTable"  style="border-collapse: collapse;margin: 10px auto;border: solid black;border-width:1px 0 1px 0px">
        <tr v-for='(item, index) in tabList4' style="text-align: center;height: 35px ">
          <template v-for='items in item'>
            <td style="width: 3%">{{items}}</td>
          </template>
        </tr>
      </table>
    </div>

    <div class="infoTitle" style="margin-top: 20px">
      特征向量矩阵
    </div>
    <div style="margin-top: 18px">
      <table  cellpadding="0" cellspacing="0" class="clearfix bigTable"  style="border-collapse: collapse;margin: 10px auto;border: solid black;border-width:1px 0 1px 0px">
        <tr v-for='(item, index) in tabList5' style="text-align: center;height: 35px ">
          <template v-for='items in item'>
            <td style="width: 3%">{{items}}</td>
          </template>
        </tr>
      </table>
    </div>
    <div class="infoTitle" style="margin-top: 20px">
      总方差解释
    </div>
    <div style="margin-top: 18px">
      <table  cellpadding="0" cellspacing="0" class="clearfix bigTable"  style="border-collapse: collapse;margin: 10px auto;border: solid black;border-width:1px 0 1px 0px">
        <tr v-for='(item, index) in tabList6' style="text-align: center;height: 35px ">
          <template v-for='items in item'>
            <td style="width: 3%">{{items}}</td>
          </template>
        </tr>
      </table>
    </div>
    <div class="infoTitle" style="margin-top: 20px">
      主成分
    </div>
    <div style="margin-top: 18px">
      <table  cellpadding="0" cellspacing="0" class="clearfix bigTable"  style="border-collapse: collapse;margin: 10px auto;border: solid black;border-width:1px 0 1px 0px">
        <tr v-for='(item, index) in tabList7' style="text-align: center;height: 35px ">
          <template v-for='items in item'>
            <td style="width: 3%">{{items}}</td>
          </template>
        </tr>
      </table>
    </div>

  </div>
</template>

<script>
  import { analyzeInfo,qzxhData,xfcData,tzzjzData,tzzxlData,zfcjs,zcf } from "@/api/manage/datacount";
  import echarts from 'echarts'
  export default {
    name: "incomecount",
    components: {},
    // An highlighted block
    watch: {
      $route(){
        this.getList1();
      }
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        // 便利蜂分店信息表格数据
        tabList1: [],
        tabList2: [],
        tabList3: [],
        tabList4: [],
        tabList5: [],
        tabList6: [],
        tabList7: [],
        radio:2020,
        queryParam:{
          type:2020
        },
        checkList:[],
        hbchecked:false,
        tbchecked:false,
        hbShow:false,
      };
    },
    created() {
      this.getList1();
      this.getList2();
      this.getList3()
      this.getList4()
      this.getList5()
      this.getList6()
      this.getList7()
    },
    methods: {
      /** 查询便利蜂分店信息列表 */
      getList1() {
        analyzeInfo(this.queryParam).then(response => {
          this.tabList1 = response.data;
        });
      },
      getList2() {
        qzxhData(this.queryParam).then(response => {
          this.tabList2 = response.data;
        });
      },
      getList3() {
        xfcData(this.queryParam).then(response => {
          this.tabList3 = response.data;
        });
      },
      getList4() {
        tzzjzData(this.queryParam).then(response => {
          this.tabList4 = response.data;
        });
      },
      getList5() {
        tzzxlData(this.queryParam).then(response => {
          this.tabList5 = response.data;
        });
      },
      getList6() {
        zfcjs(this.queryParam).then(response => {
          this.tabList6 = response.data;
        });
      },
      getList7() {
        zcf(this.queryParam).then(response => {
          this.tabList7 = response.data;
        });
      },
      radioChange(val){
        this.queryParam.type = val
        this.getList1()
        this.getList2()
        this.getList3()
        this.getList4()
        this.getList5()
        this.getList6()
        this.getList7()
      },
    }
  };
</script>
<style scoped>
  .infoTitle {
    height: 36px;
    background-color: #f9f9f9;
    padding-left: 23px;
    line-height: 36px;
    color: #333;
    font-size: 14px;
    margin-bottom: 18px;
  }

</style>
